<template>
    <div class="goodsEditBox">
        <AppLayout></AppLayout>
        <div class="rightBox">
            <div class="AppTopInformationBar">
                <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="info" v-if="userInfo">
                    <span>欢迎{{userStore.userInfo.account}}登录 ，</span>
                    <span class="quit" @click="logout">退出登录</span>
                    <el-avatar :size="30" :src="baseURL+userStore.userInfo.imgUrl" />
                </div>
            </div>
            <Apptitle title="商品编辑"></Apptitle>
            <div class="goodsEditFormBox">
                <el-form 
                    :model="goodsStore.goodsInfo"
                    label-width="120px"
                    style="max-width: 600px"
                >
                    <el-form-item label="商品名称：">
                        <el-input v-model="goodsStore.goodsInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类:">
                        <el-select v-model="classification"
                        style="width: 70%;"
                        placeholder="请选择分类">
                            <el-option v-for="item in catlist" 
                            :key="item.id" 
                            :label="item.cateName" 
                            :value="item.cateName"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品价格：">
                        <el-input-number v-model="goodsStore.goodsInfo.price" 
                        :min="1"
                        :max="10000"
                        />
                    </el-form-item>
                    <el-form-item label="商品图片：">
                        <el-upload
                            class="goods-uploader"
                            :action="'/api/goods/goods_img_upload'"
                            :show-file-list="false"
                            :on-success="handleGoodsSuccess"
                            :before-upload="beforeGoodsUpload"
                        >
                            <img v-if="goodsStore.goodsInfo.imgUrl" :src="baseURL+goodsStore.goodsInfo.imgUrl" class="goods" />
                            <el-icon v-else class="goods-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="商品描述:">
                        <el-input type="textarea" v-model="goodsStore.goodsInfo.goodsDesc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="goodsEditSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item> 
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
    import AppLayout from '@/components/layout/AppLayout.vue'
    import Apptitle from '@/components/title/Apptitle.vue'
    import {getRoutesMeta} from '@/utils/getRoutesMeta';
    import { routes } from '@/router/index';
    import {useRoute,useRouter} from 'vue-router'
    import { computed,ref,reactive } from 'vue';
    import { accountInfo } from '@/api/account';
    import { useUserStore } from '@/store/modules/user';
    import { baseURL } from '@/utils/common.js';
    import dayjs from 'dayjs';
    import { useGoodsStore } from '@/store/modules/goods';
    import { goodsEdit } from '@/api/goods';
    import { goodsInfo } from '@/api/goods';
    import { goodsCatelist } from '@/api/goods';
    import { Plus } from '@element-plus/icons-vue'
    const goodsStore = useGoodsStore();
    const router = useRouter();
    const route = useRoute();
    const userStore = useUserStore();
    const userInfo = reactive({});
    const classification = ref('');
    const catlist=ref([])
    console.log(goodsStore.goodsInfo);
    

    const start = async()  =>{
        const {code,data,msg}=await goodsInfo({id:route.params.id});
        if(code==0){
            console.log(data);
            ElMessage.success('请修改商品')
            goodsStore.setGoodsInfo(data)
            
            classification.value=data.category;
        }else{
            ElMessage.error(msg)
        }
    }
    start();
    const getcatelist=async()=>{
    const {total,data,msg}=await goodsCatelist({currentPage:1,pageSize:1000});
        if(total){
            catlist.value=data;
            console.log(catlist.value);
        }else{
            ElMessage.error(msg)
        }
    }
    getcatelist()
    accountInfo({id:userStore.userInfo.id}).then(res=>{
        res.accountInfo.ctime = dayjs(res.accountInfo.ctime).format("YYYY-MM-DD");
        let {account, imgUrl} = res.accountInfo;
        userStore.setUserInfo(res.accountInfo)
        userInfo.account = account;
        userInfo.imgUrl = imgUrl;
    })
    const logout = () => {
        userStore.setToken(null)
        userStore.setUserId(null)
        userStore.setUserInfo(null)
        router.push('/login')
    }
    const handleGoodsSuccess = (res) => {
        goodsStore.goodsInfo.imgUrl = res.imgUrl;
    }
    const beforeGoodsUpload = (file) => {
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
            ElMessage.error('请上传JPG/PNG图片');
        }
        if (!isLt2M) {
            ElMessage.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    }
    const goodsEditSubmit = () => {
        console.log(goodsStore.goodsInfo);
        let {imgUrl} = goodsStore.goodsInfo;
        goodsStore.goodsInfo.imgUrl = goodsStore.goodsInfo.imgUrl.slice(23);
        goodsEdit(goodsStore.goodsInfo).then(res => {
            if (res.code == 0) {
                ElMessage.success(res.msg);
                goodsStore.goodsInfo.imgUrl = imgUrl;
            }    
            else {
                ElMessage.error(res.msg);
            }
        })
    }
</script>
<style lang="scss" scoped>
    .goodsEditBox{
        width: 100%;
        height: 100%;
        display: flex;
        .rightBox{
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
    }
    .goodsEditFormBox{
        margin: 20px 0;
    }
    .AppTopInformationBar{
        width: 100%;
        height: 50px;
        background-color: #fff;
        padding: 10px 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info{
            display: flex;
            align-items: center;
            span{
                margin-right: 10px;
            }
        }
    }
    .quit{
        cursor: pointer;
    }
    .accountImg{
        width: 100px;
        height: 100px;
    }
    .goods{
        width: 100px;
        height: 100px;

    }

    :deep(.el-breadcrumb__item:last-child>span){
        color: #409eff !important;
        font-weight: bold;
    }
    :deep(.el-breadcrumb__item:first-child>span){
        cursor: pointer !important;
    }
    :deep(.el-breadcrumb__item:first-child>span){
        color: rgb(0, 0, 0) !important;
        font-weight: bold;
    }
    :deep(.el-breadcrumb__item:first-child>span:hover){
        color: #409eff !important;
        font-weight: bold;
    }
</style>